<template>
    <div class="ShomeP">


            <div>
            <img style="width: 100%;" src="../../style/image/Shome/swiper.png" alt="">
            </div>

            <div class="shome-head">

                    <div class="shome-head-top">
                        <div  style="padding: 0.5rem;">
                                 <div class="balance">
                                    <div style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 400;
color: #999999;" >当前余额</div>
                                     <div class="withdraw" >去提现</div>
                                 </div>
                                 <div style="
font-size: 1.28rem;
font-family: PingFang SC;
font-weight: 400;
color: #02AF74;" >
                                    1232 <span style="
font-size: 0.88rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;">元</span>
                                 </div>
                        </div>

                        <div style="padding: 0.5rem;">
                                  <div class="balance">
                                    <div style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 400;
color: #999999;" >昨日收益</div>
                                    
                                 </div>
                                 <div style="
font-size: 1.28rem;
font-family: PingFang SC;
font-weight: 400;
color: #02AF74;" >
                                    1232 <span style="
font-size: 0.88rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;">元</span>
                                 </div>
                        </div>

                    </div>

                    <div class="shome-head-bottom">
                        <div style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;" >
                        累计收益:   900.00元
                        </div>
                         <div style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;">
                        累计收益:   900.00元
                        </div>
                    </div>
            </div>  


            <div style="
font-size: 0.94rem;
font-family: PingFang SC;
font-weight: 400;
color: #000423;
top: -5rem;
position: relative;
margin-left: 1rem;
">
                常用工具
            </div>

            <div class="dataList">
      <div
        class="dataList-item"
        @click=""
        v-for="(item, index) in dataLists"
        :key="index"
      >
        <div :style="{ padding: '0.7rem 0.5rem' }" @click="goItemM(item)"  >
          <img style="width: 3rem" :src="item.img" alt="" />
          <div style="
font-size: 0.67rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;">{{ item.name }}</div>
        </div>
      </div>
    </div>
        
    </div>
    </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public dataLists = [
    {
      img: require("../../style/image/Shome/B1.png"),
      name: "实名认证",
      value: "",
    },
    {
      img: require("../../style/image/Shome/B2.png"),
      name: "门店信息",
      value: "",
    },
    {
      img: require("../../style/image/Shome/B3.png"),
      name: "弹出设备",
      value: "",
    },
    {
      img: require("../../style/image/Shome/B4.png"),
      name: "设备报修",
      value: "",
    },
    {
      img: require("../../style/image/Shome/B5.png"),
      name: "提现记录",
      value: "",
    },
    {
      img: require("../../style/image/Shome/B6.png"),
      name: "收益明细",
      value: "",
    },
    {
      img: require("../../style/image/Shome/B7.png"),
      name: "个人中心",
      value: "",
    },
    {
      img: require("../../style/image/Shome/B8.png"),
      name: "设备联系人",
      value: "",
    },
    {
      img: require("../../style/image/Shome/B9.png"),
      name: "退出登录",
      value: "",
    },
  ];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  goItemM(data: any) {
    console.log(data);

    if (data.name == "弹出设备") {
      console.log(123);

      uni.navigateTo({
        url: "../sEquiptment/eject",
        animationType: "pop-in", //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
        animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
        success: function (res) {
          console.log(1238888);
        },
        fail: function (res) {
          console.log(333333);
        },
      });

      console.log(456);
    } else if (data.name == "设备联系人") {
      console.log(123);

      uni.navigateTo({
        url: "../sEquiptment/contact",
        animationType: "pop-in", //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
        animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
        success: function (res) {
          console.log(1238888);
        },
        fail: function (res) {
          console.log(333333);
        },
      });
    }
    else if (data.name == "设备联系人") {
      console.log(123);

      uni.navigateTo({
        url: "../sEquiptment/contact",
        animationType: "pop-in", //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
        animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
        success: function (res) {
          console.log(1238888);
        },
        fail: function (res) {
          console.log(333333);
        },
      });
    }
    else if (data.name == "个人中心") {
      console.log(123);

      uni.navigateTo({
        url: "../Smy/index",
        animationType: "pop-in", //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
        animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
        success: function (res) {
          console.log(1238888);
        },
        fail: function (res) {
          console.log(333333);
        },
      });
    }
     else if (data.name == "门店信息") {
      console.log(123);

      uni.navigateTo({
        url: "../shopInfo/index",
        animationType: "pop-in", //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
        animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
        success: function (res) {
          console.log(1238888);
        },
        fail: function (res) {
          console.log(333333);
        },
      });
    }
     else if (data.name == "设备报修") {
      console.log(123);

      uni.navigateTo({
        url: "../sEquiptment/fix",
        animationType: "pop-in", //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
        animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
        success: function (res) {
          console.log(1238888);
        },
        fail: function (res) {
          console.log(333333);
        },
      });
    }
    else if (data.name == "提现记录") {
      console.log(123);

      uni.navigateTo({
        url: "../withDrawProlify/withdrwaNotes",
        animationType: "pop-in", //跳转动画  默认值为 pop-in,  可以的值 pop-in、pop-out、none、auto 等。。。
        animationDuration: 200, //设置窗口显示/关闭动画的持续时间，单位为 ms
        success: function (res) {
          console.log(1238888);
        },
        fail: function (res) {
          console.log(333333);
        },
      });
    }


  }
}
</script>

<style  scoped>
.shome-head {
  background: #ffffff;
  box-shadow: 0rem 0.5rem 0.5rem 0rem rgba(153, 153, 153, 0.29);
  border-radius: 0.3rem;
  margin: 1rem;
  position: relative;
  top: -5rem;
}

.shome-head-top {
  display: flex;
  align-items: center;

  border-bottom: 1px solid red;
  justify-content: space-around;
}

.balance {
  display: flex;
  align-items: center;
  height: 2rem;
}

.withdraw {
  background: #ea9200;
  box-shadow: 0rem 1px 1px 1px #f0cc8f;
  border-radius: 1rem;
  padding: 0.2rem;
  color: white;
  width: 3rem;
  text-align: center;
  margin-left: 0.3rem;
}

.shome-head-bottom {
  display: flex;
  padding: 0.8rem;
  justify-content: space-between;
}

.dataList {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  position: relative;
  top: -5rem;
}

.dataList-item {
  width: 25%;
  text-align: center;
}
</style>